<script setup lang="ts"></script>

<template>
    <div class="main">
        <div class="div_table">
        <table>
            <thead>
                <tr>
                <th>班级</th>
                <th>姓名</th>
                <th>原因</th>
                <th>人数</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>21大数据1班</td>
                <td>张三</td>
                <td>生病</td>
                <td>1/3</td>
            </tr>
            <tr>
                <td>21大数据1班</td>
                <td>张三</td>
                <td>生病</td>
                <td>1/3</td>
            </tr>
            <tr>
                <td>21大数据1班</td>
                <td>张三</td>
                <td>生病</td>
                <td>1/3</td>
            </tr>
            <tr>
                <td>21大数据1班</td>
                <td>张三</td>
                <td>生病</td>
                <td>1/3</td>
            </tr>
            <tr>
                <td>21大数据1班</td>
                <td>张三</td>
                <td>生病</td>
                <td>1/3</td>
            </tr>
            <tr>
                <td>21大数据1班</td>
                <td>张三</td>
                <td>生病</td>
                <td>1/3</td>
            </tr>
            <tr>
                <td>21大数据1班</td>
                <td>张三</td>
                <td>生病</td>
                <td>1/3</td>
            </tr>
            <tr>
                <td>21大数据1班</td>
                <td>张三</td>
                <td>生病</td>
                <td>1/3</td>
            </tr>
            <tr>
                <td>21大数据1班</td>
                <td>张三</td>
                <td>生病</td>
                <td>1/3</td>
            </tr>
            <tr>
                <td>21大数据1班</td>
                <td>张三</td>
                <td>生病</td>
                <td>1/3</td>
            </tr>
            <tr>
                <td>21大数据1班</td>
                <td>张三</td>
                <td>生病</td>
                <td>1/3</td>
            </tr>
            </tbody>
       </table>
        </div>
    </div>
</template>

<style scoped>
.main{
    background-image: url(../../images/border1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
table{
    width: 80%;
    margin: 1vh 2.3vw;
    font-size: 20px;
    color: whitesmoke;
}
table,th,td{
    border: 1px solid #00b4ed;
    border-collapse: collapse;
}
.div_table{
    margin: 5.5vh 4.5vw;
    width: 70%;
    height: 75%;
    overflow-y: auto;
     &::-webkit-scrollbar{
        width: 8px;
     }
    &::-webkit-scrollbar-track{
        background: #00b4ed;
        border-radius: 10px;
    }
    &::-webkit-scrollbar-thumb{
        background: #2b99c2;
    }
     &::-webkit-scrollbar-thumb:hover{
        background: #146d88;
     }
}
</style>